<template>
    <div class="w1200 game-wrap">
      <div class="game-main cf">
          <div class="fl game-main-item">
              <img class="f-din f-vm" :src="data.micon"/>
              <div class="game-descr f-din f-vm">
                  <p class="f-18">{{data.name}}</p>
                  <p>下载量：{{data.downloads}}次&nbsp;类型：{{data.typename}}&nbsp;游戏大小：{{data.size}}</p>
                  <p>开发商：{{data.developer}}</p>
              </div>
          </div>
          <div class="fr game-download">
              <p><span class="game-menu menu-and" @click="qrcode(data.androidurl)">安卓</span><span class="game-menu menu-ios" @click="qrcode(data.iosurl)">苹果</span></p>
              <img width="140" height="140" :src="imgurl" alt="">
              <p>手机扫码下载</p>
          </div>
      </div>
      <h2 class="game-title">游戏简介</h2>
      <div class="game-intro" v-html="data.description"></div>
      <h2 class="game-title">游戏截图</h2><!----> 
      <carousel :banner="data.bigimage"/>
    </div>
</template>

<script>
import Carousel from '~/components/Carousel'
export default {
    name:'gamedetail',
    layout:'index',
    data(){
        return{
            isAnd:true,
            imgurl:''
        }
    },
    head: {
        title: '游戏详情'
    },
    async asyncData ({store,params}) {
        try {
            const {data}=await store.$axios.get(`/php/stat/gameinfo?gameid=${params.id}`)
            return {
                data:data.data
            }
        } catch (error) {
            console.log(error)
        }
    },
    components:{
        Carousel
    },
    methods: {
        qrcode(url){
            if(url){
                let imgpar=(url.indexOf('http')!=-1)?url:`http://${url}`;
                this.imgurl=`/qrcode?url=${imgpar}`;
            }else{
                this.imgurl='//via.placeholder.com/140x140';
            } 
        }
    },
    mounted(){
        this.$nextTick(() => {
            // DOM操作
            document.querySelector('.menu-and').click();
        })/**/
    }
}
</script>

<style scoped>
    .game-wrap{
        padding: .925926rem;
        font-size: 14px;
    }
    .game-main-item{
        margin-top: .648148rem;
    }
    .game-main-item img{
        width:2.333333rem;
        height: 2.333333rem;
    }
    .game-descr p{
        margin-left: .648148rem;
        line-height: 3;
    }
	.game-title{
        margin: .925926rem 0; 
        font-size: 20px; 
    }
    .game-download{
        margin-right: 1.851852rem;
        text-align: center;
    }
    .game-menu{
        width:50%;
        display:inline-block;
        padding:.185185rem 0;
        cursor: pointer;
    }
</style>